<template>
  <div class="article-manager video-icon station-index" id="shopp-manager">
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb>
        <div slot="title">
          <router-link :to="{ path: '/admin/line/custom_bus_list' }"
            ><Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            ></router-link
          >
          <span
            v-text="$route.query.line_id ? '编辑线路' : '添加线路'"
            class="mr20"
          ></span>
        </div>
      </PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <!-- <Tabs v-model="currentTab" @on-click="onhangeTab">
        <TabPane label="基础信息" name="1"></TabPane>
        <TabPane label="站点信息" name="2"></TabPane>
        <TabPane label="班次信息" name="3"></TabPane>
        <TabPane label="运营信息" name="4"></TabPane>
      </Tabs> -->
      <Steps :current="currentTab">
        <Step title="基础信息" content="添加线路出发城市、预售天数等"></Step>
        <Step title="线路站点" content="请点击地图添加站点，可拖拽站点"></Step>
        <Step title="价格设置" content="*线路售卖价格"></Step>
    </Steps>
       <!-- 线路基础信息-->
      <!-- <Form
        style="margin-left:12%" 
        class="formValidate mt20"
        ref="baseInfoForm"
        :rules="ruleValidate"
        :model="baseInfoForm"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" type="flex" v-show="currentTab === 0">
          <Col span="24">
            <FormItem label="线路城市：" prop="city_id">
              <Select v-model="baseInfoForm.city_id"  v-width="'35%'" @on-change="selectCity" placeholder="请选择线路城市">
                  <Option v-for="item in cityList" :value="item.city_id" :key="item.city_id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="线路公司：" prop="company_id">
              <Select v-model="baseInfoForm.company_id"  v-width="'35%'"  placeholder="请选择线路公司">
                  <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.company_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="线路编号：" prop="line_sn">
              <Input
                v-model="baseInfoForm.line_sn"
                placeholder="请输入线路编号"
                v-width="'35%'"
              />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="出发地：" prop="origin">
              <Input
                v-model="baseInfoForm.origin"
                placeholder="请输入线路出发地"
                v-width="'35%'"
              />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="目的地：" prop="destination">
              <Input
                v-model="baseInfoForm.destination"
                placeholder="请输入线路目的地"
                v-width="'35%'"
              />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="线路特性：" prop="trait">
              <Select v-model="baseInfoForm.trait" v-width="'35%'" placeholder="请选择线路特性">
                <Option label="通勤" :value="1" />
                <Option  label="高铁" :value="2" />
                <Option label="高校" :value="3" />
                <Option label="机场" :value="5" />
                <Option label="高品质公交" :value="6" />
                <Option label="红色专线" :value="7" />
            </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="座位类型：" prop="seat_type">
              <Select v-model="baseInfoForm.seat_type" v-width="'35%'" placeholder="请选择座位类型">
              <Option label="一人一座" :value="1" />
              <Option label="不限座" :value="2" />
             </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>   -->
      <!-- 线路基础信息-->
      <!-- 线路站点信息-->
      <Row v-show="currentTab === 1">
        <div id="container" class="map" tabindex="0" style="height:400px;">
          <div class="info">
            <div class="input-item">
              <div class="input-item-prepend" />
              <input id="pickerInput" placeholder="">
            </div>
          </div>
        </div>
        <div v-if="stopList&&stopList.length"  style="display: flex; overflow-x: auto; margin: 10px 0px;">
          <template v-for="(item,index) in stopList" >
            <!-- 起点 -->
            <div v-if="index==0" style="max-width: 120px; margin: 10px 0px 10px 70px; flex-shrink: 0;">
              <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
                <img v-if="item.stop_type==1" src="../../../assets/common/stop_up.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==2" src="../../../assets/common/stop_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==3" src="../../../assets/common/stop_up_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <div style="display: flex;flex: 1 1 0%;align-items: center;">
                  <div style="height: 2px; margin: 10px 0px; background-color: rgb(191, 191, 191); width: 20px;" />
                  <!-- <div v-if="item.time_consume"><div>{{ item.time_consume }}</div></div> -->
                  <div>
                    <span class="ant-input-affix-wrapper ant-input-affix-wrapper-sm">
                      <input v-model="item.time_consume" type="text" class="ant-input ant-input-sm" @blur="addConsumeTime(index,item.time_consume)">
                      <span class="ant-input-suffix">分钟</span>
                    </span>
                  </div>
                  <div style="height: 2px; margin: 10px 0px; background-color: rgb(191, 191, 191); width: 20px;" />
                </div>
              </div>
              <p class="stop-item" style="width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">{{ item.stop_name }}</p>
              <div v-if="item.panne" class="station-control-panne">
                <!-- <a class="moveLeft" title="左移" /> -->
                <!-- <a class="addStationLeft" title="添加站点(左)" /> -->
                <a class="delete" title="删除" @click="deleteStop(item,index)" />
                <a class="edit" title="编辑" @click="editStop(item,index)" />
                <!-- <a class="addStationRight" title="添加站点(右)" /> -->
                <!-- <a class="moveRight" title="右移" /> -->
              </div>
            </div>
            <!-- 终点 -->
            <div v-else-if="index==(stopList.length-1)" style="max-width: 120px; margin: 10px 70px 10px 0px; flex-shrink: 0;">
              <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
                <img v-if="item.stop_type==1" src="../../../assets/common/stop_up.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==2" src="../../../assets/common/stop_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==3" src="../../../assets/common/stop_up_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
              </div>
              <p class="stop-item" style="width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">{{ item.stop_name }}</p>
              <div v-if="item.panne" class="station-control-panne">
                <a class="moveLeft" title="左移" @click="stopUp(index)" />
                <!-- <a class="addStationLeft" title="添加站点(左)" /> -->
                <a class="delete" title="删除" @click="deleteStop(item,index)" />
                <a class="edit" title="编辑" @click="editStop(item,index)" />
                <!-- <a class="addStationRight" title="添加站点(右)" /> -->
                <!-- <a class="moveRight" title="右移" /> -->
              </div>
            </div>
            <!-- 途经点 -->
            <div v-else style="max-width: 120px; margin: 10px 0px; flex-shrink: 0;">
              <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
                <img v-if="item.stop_type==1" src="../../../assets/common/stop_up.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==2" src="../../../assets/common/stop_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <img v-if="item.stop_type==3" src="../../../assets/common/stop_up_down.png" style="width: 20px; height: 20px;" alt="站点类型" @click="showPanne(index)">
                <div style="display: flex;flex: 1 1 0%;align-items: center;">
                  <div style="height: 2px; margin: 10px 0px; background-color: rgb(191, 191, 191); width: 20px;" />
                  <!-- <div v-if="item.time_consume"><div>{{ item.time_consume }}</div></div> -->
                  <div>
                    <span class="ant-input-affix-wrapper ant-input-affix-wrapper-sm">
                      <input v-model="item.time_consume" type="text" class="ant-input ant-input-sm" @blur="addConsumeTime(index,item.time_consume)">
                      <span class="ant-input-suffix">分钟</span>
                    </span>
                  </div>
                  <div style="height: 2px; margin: 10px 0px; background-color: rgb(191, 191, 191); width: 20px;" />
                </div>
              </div>
              <p class="stop-item" style="width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">{{ item.stop_name }}</p>
              <div v-if="item.panne" class="station-control-panne">
                <a class="moveLeft" title="左移" @click="stopUp(index)" />
                <!-- <a class="addStationLeft" title="添加站点(左)" /> -->
                <a class="delete" title="删除" @click="deleteStop(item,index)" />
                <a class="edit" title="编辑" @click="editStop(item,index)" />
                <!-- <a class="addStationRight" title="添加站点(右)" /> -->
                <a class="moveRight" title="右移" @click="stopDown(index)" />
              </div>
            </div>
          </template>
        </div> 
        <div v-else  style="display: flex; overflow-x: auto; margin: 30px 0px;">
            ···请点击地图添加站点！···
        </div>
      </Row>
      <!-- 线路站点信息-->
      <!-- 班次信息-->
      <!-- <Row  justify="space-between" v-show="currentTab === 2">
        <div style="display: flex;flex-direction: column;margin-bottom: 40px;">
            <div >
                <Button type="primary" icon="ios-add-circle-outline" @click="addRegularVersion">添加班次版本</Button>
          </div>
          <Table
          ref="table"
          :columns="columns1"
          :data="regularListData"
          class="ivu-mt"
          :loading="loading"
          highlight-row
          no-data-text="暂无数据"
          no-filtered-data-text="暂无筛选结果"
        >
          <template slot-scope="{ row }" slot="sales_desc">
            <div v-if="row.sales_desc" style="margin: 5px 0px;align-items: center;">
              {{ row.sales_desc }}
            </div>
            <div v-else>
              --
            </div>   
          </template>
          <template slot-scope="{ row }" slot="dp_time_str">
            <div v-if="row.dp_time_str" style="margin: 5px 0px;align-items: center;">
              {{ row.dp_time_str }}
            </div>
            <div v-else>
              --
            </div>   
          </template>

      
          <template slot-scope="{ row }" slot="action">
            <a @click="addRegular(row)">增加班次</a>
            <Divider type="vertical" />
            <a  @click="editRegular(row,'edit')">编辑版本</a>        
            <Divider type="vertical" />
            <a @click="editRegular(row,'delete')" style="color:red">{{ row.status?'下线':'上线' }}</a>        
            </template>
        </Table>
        </div>

      </Row> -->
      <!-- 班次信息-->

      


      <!-- 运营信息-->
      <Row v-show="currentTab === 0">
        <Form
        style="margin-left:12%" 
        class="formValidate mt20"
        ref="operationForm"
        :rules="ruleValidate"
        :model="operationForm"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" >
          <Col span="12">
             <FormItem label="出发城市：" prop="start_city">
              <Select v-model="operationForm.start_city"  v-width="'50%'" @on-change="selectCityStart" placeholder="请选择出发城市">
                  <Option v-for="item in odCityList" :value="item.id" :key="item.id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="出发城市：" prop="end_city">
              <Select v-model="operationForm.end_city"  v-width="'50%'" @on-change="selectCityEnd" placeholder="请选择到达城市">
                  <Option v-for="item in odCityList" :value="item.id" :key="item.id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="单次限购人数：" prop="per_buy_num">
                <InputNumber :min="1" v-model="operationForm.per_buy_num"   :formatter="value => `${value}人`"></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="可提前检票时间：" prop="check_time">
                <InputNumber :min="0" v-model="operationForm.check_time"   :formatter="value => `${value}分钟`"></InputNumber>
            </FormItem>
          </Col>
          <Col span="14">
            <FormItem label="可提前退票时间：" prop="ahead_refund_time">
                <InputNumber :min="0" v-model="operationForm.ahead_refund_time"   :formatter="value => `${value}分钟`"></InputNumber>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="截止售卖时间" prop="abort_time">
                <InputNumber :min="0"  v-model="operationForm.abort_time"   :formatter="value => `${value}分钟`"></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="预售天数：" prop="yu_sale_num">
                <InputNumber :min="0" :max="30" v-model="operationForm.yu_sale_num"   :formatter="value => `${value}天`"></InputNumber>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="排序：" prop="price">
                <InputNumber :min="0" v-model="operationForm.sort"   ></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="原价(展示作用)：" prop="">
                <InputNumber :min="0.01" v-model="operationForm.price"   ></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="售卖价(展示作用)：" prop="discount_price">
                <InputNumber :min="0.01" v-model="operationForm.discount_price"  ></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="是否热门推荐" prop="">
              <RadioGroup v-model="operationForm.ishot">
                  <Radio :label="0">否</Radio>
                  <Radio :label="1">是</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="实名认证：" prop="is_passenger">
              <RadioGroup v-model="operationForm.is_passenger">
                  <Radio :label="0">不需要</Radio>
                  <Radio :label="1">需要</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="验票方式：" prop="check_ticket_type">
              <RadioGroup v-model="operationForm.check_ticket_type">
                  <Radio :label="1">动态码</Radio>
                  <Radio :label="2" >二维码</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="单独设置：" >
            
            <Checkbox v-model="value1" @on-change="changeBrokerage">佣金设置（单独设置佣金）</Checkbox>
            </FormItem>
          </Col>
          <Col span="24" v-if="operationForm.is_brokerage">
            <FormItem label="佣金设置：" >
              <span >
                一级返佣：<InputNumber
                  placeholder="请输入一级返佣"
                  :min="0"
                  class="columnsBox perW20"
                  v-model="brokerage"
                ></InputNumber>
                二级返佣：<InputNumber
                  placeholder="请输入二级返佣"
                  :min="0"
                  class="columnsBox perW20"
                  v-model="brokerageTwo"
                ></InputNumber>
              </span>
              </span>
            </FormItem>
          </Col>
        </Row>
        </Form> 
      </Row>
      <!-- 运营信息-->
      <!-- 价格设置 -->
      <Row  justify="space-between" v-show="currentTab === 2">
    
          <div style="display: flex;flex-direction: column;margin-bottom: 40px;align-items: center;margin-top:40px">
               <div  v-for="(item, index) in priceList" :key="index" style="display: flex;flex-direction: row;margin-bottom:15px;justify-content: flex-start;">
                 <span style="color:red">*</span>
                 <div>{{item.on_stop_name}}-{{item.off_stop_name}}:</div>
                  <InputNumber :min="0" v-model="item.price" style='margin-left:15px' ></InputNumber>
               </div>
          </div>
      </Row>
      <!-- 价格设置 -->
      <div style="text-align:center">
        <Button v-if="currentTab !== 0" @click="upTab">上一步</Button>
        <Button
          type="primary"
          class="submission"
          @click="saveBaseInfo('operationForm')"
          v-if="currentTab === 0&&!Id"
          >保存线路基础信息
        </Button>
        <Button
          type="primary"
          class="submission"
          @click="saveBaseInfo('operationForm')"
          v-if="currentTab === 0&&Id"
          style="margin-left:15px"
          >保存修改
        </Button>
        <Button
          type="primary"
          class="submission"
          @click="submitSaveStop('edit')"
          v-if="currentTab === 1&&Id&&stopList.length>=2&&isStopListAdd==false"
          style="margin-left:15px"
          >更新站点
        </Button>
        <Button
          type="primary"
          class="submission"
          @click="submitSaveStop('add')"
          v-if="currentTab === 1&&Id&&stopList.length>=2&&isStopListAdd==true"
          style="margin-left:15px"
          >保存站点
        </Button>
        <Button
          class="submission"
          v-if="currentTab == 0&&Id"
          @click="downTab"
          style="margin-left:15px"
          >下一步
        </Button>
        <Button
          class="submission"
          v-if="currentTab == 1&&Id&&stopList.length>=2&&isToRegular"
          @click="downTab"
            style="margin-left:15px"
          >下一步
        </Button>
        <Button
          class="submission"
          type="primary"
          v-if="currentTab == 2&&Id&&regularListData.length"
          @click="next"
            style="margin-left:15px"
          >下一步
        </Button>
        <Button
          class="submission"
          type="primary"
          v-if="currentTab == 2&&Id"
         @click="submitPriceList()"
            style="margin-left:15px"
          >保存
        </Button>
        
      </div>
      <Spin size="large" fix v-if="spinShow"></Spin>
      

      <Modal
        v-model="isShow"
        width="41%"
        scrollable
        closable
        title="线路站点"
        :mask-closable="false"
        :z-index="1"
        @on-cancel="closeStopForm"
        @on-ok="submitStopForm('stopForm')"
       loading
      >
      <Form
        class="formValidate mt20"
        ref="stopForm"
        :rules="ruleValidate"
        :model="stopForm"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" type="flex">
          <Col span="24">
            <FormItem label="站点名称：" prop="stop_name">
              <Input
                v-model="stopForm.stop_name"
                placeholder="请输入站点名称"
                v-width="'55%'"
              />
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="上下车点：" prop="stop_type">
              <Select v-model="stopForm.stop_type" v-width="'55%'" placeholder="请选择上下车点">
              <Option label="上车点" :value="1" />
              <Option label="下车点" :value="2" />
             </Select>
            </FormItem>
            <FormItem label="站点类型：" prop="stop_tag">
              <Select v-model="stopForm.stop_tag" v-width="'55%'" placeholder="请选择站点类型">
              <Option label="车站" :value="1" />
              <Option label="虚拟站" :value="2" />
             </Select>
            </FormItem>
            <FormItem label="经度：" prop="lng">
             <Input v-model="stopForm.lng" disabled v-width="'55%'" />
            </FormItem>
            <FormItem label="纬度：" prop="lat">
             <Input v-model="stopForm.lat" disabled v-width="'55%'" />
            </FormItem>
            <FormItem label="站点图片：" >
             <div class="acea-row">
                <div
                  class="pictrue"
                  v-for="(item, index) in stopForm.image"
                  :key="index"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <img v-lazy="item" />
                  <Button
                    shape="circle"
                    icon="md-close"
                    @click.native="handleRemove(index)"
                    class="btndel"
                  ></Button>
                </div>
                <div
                  v-if="stopForm.image.length < 10"
                  class="upLoad acea-row row-center-wrapper"
                  @click="modalPicTap('duo')"
                >
                  <Icon type="ios-camera-outline" size="26" />
                </div>
                <Input
                  v-model="stopForm.image[0]"
                  style="display: none"
                ></Input>
              </div>
              <div class="tips">(最多10张<br />750*750)</div>
            </FormItem>
          </Col>
        </Row>
      </Form>     
      </Modal>

      <Modal
        v-model="modalPic"
        width="60%"
        scrollable
        footer-hide
        closable
        title="上传产品图"
        :mask-closable="false"
        :z-index="1"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </Modal>

       <Modal
        v-model="showSchedule"
        width="35%"
        scrollable
        closable
        title="班次版本"
        :mask-closable="false"
        :z-index="1"
        @on-cancel="closescheduItem('scheduItemForm')"
        @on-ok="submitScheduleItemForm('scheduItemForm')"
       loading
      >
      <Form
        class="formValidate mt20"
        ref="scheduItemForm"
        :rules="ruleValidate"
        :model="scheduItemForm"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" type="flex">
          <Col span="24">
            <FormItem label="售卖周期：" prop="sale_dates_list">
              <Select v-model="scheduItemForm.sale_dates_list" multiple placeholder="请选择售卖周期">
                <Option v-for="(item,key) in sale_dates_state" :key="key" :label="item" :value="key" />
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="状态：">
               <RadioGroup v-model="scheduItemForm.status">
                  <Radio :label="0">关闭</Radio>
                  <Radio :label="1">开启</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>  
      </Form>              
      </Modal>

      <Modal
        v-model="showAddRegular"
        width="35%"
        scrollable
        closable
        title="添加首站出发时间"
        :mask-closable="false"
        :z-index="1"
        @on-cancel="closeRegular('regularForm')"
        @on-ok="submitRegularForm('regularForm')"
       loading
      >
      <Form
        class="formValidate mt20"
        ref="regularForm"
        :rules="ruleValidate"
        :model="regularForm"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row :gutter="24" type="flex">
          <Col span="24">
            <FormItem label="首站出发时间：" prop="startTime">
                 <TimePicker      @on-change="handleChange" format="HH:mm" placeholder="请选择首站出发时间" style="width: 130px"></TimePicker>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="状态：">
               <RadioGroup v-model="regularForm.regular_status">
                  <Radio :label="0">关闭</Radio>
                  <Radio :label="1">开启</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
    
      </Form>
        
         
      </Modal>
    </Card>

  </div>
</template>

<script>
// import COS from 'cos-js-sdk-v5'
import uploadPictures from "@/components/uploadPictures";

import util from '@/libs/util';
import { mapState } from "vuex";
import {adminInfoApi,businessCityListApi} from "@/api/setting"
import { saveCustomBusBaseInfoApi,
              getCustomBusApi,getStopRoutes,
               saveLineStopApi,saveRegularVersion,
               getRegularVersionApi,saveRegularApi,saveBaseOperationApi,saveLinePrice} from "@/api/line"
export default {
  name: "line_customBusAdd",
    components: {
    uploadPictures
  },
  data() {
    return {
      value1:false,
      priceList:[],
      onList:[],
      offList:[],
      Id:0,
      lineId:0,
      cityList: [],
      companyList:[],
      baseInfoForm:{
        city_id:'',
        company_id:'',
        line_sn:'',
        id: 0,
        trait: '',
        seat_type: '',
        origin: '',
        destination: '',
      },
      spinShow: false,
      currentTab: 0,

     
      ruleValidate: {
        start_city:[
           { required: true,type:'number', message: "请选择出发城市", trigger: "change" },
        ],
        end_city:[
           { required: true,type:'number', message: "请选择到达城市", trigger: "change" },
        ],
        city_id:[
           { required: true,type:'number', message: "请选择所属城市", trigger: "change" },
        ],
        company_id:[
           { required: true,type:'number', message: "请选择所属公司", trigger: "change" },
        ],
         line_sn: [
          { required: true, message: "请输入线路编号", trigger: "blur" },
        ],
        origin: [
          { required: true, message: "请输入线路出发地", trigger: "blur" },
        ],
        destination: [
          { required: true, message: "请输入线路目的地", trigger: "blur" },
        ],
        trait:[
           { required: true,type:'number', message: "请选择线路特性", trigger: "change" },
        ],
        seat_type:[
           { required: true,type:'number', message: "请选择座位类型", trigger: "change" },
        ],
        stop_name: [
          { required: true, message: '请输入站点名称', trigger: 'blur' }
        ],
        stop_type: [
          { required: true, type:'number',message: '请选择上下站类型', trigger: 'change' }
        ],
        stop_tag: [
          { required: true,type:'number', message: '请选择站点类型', trigger: 'change' }
        ],
        lng: [
          { required: true }
        ],
        lat: [
          { required: true }
        ],
        sale_dates_list: [
          { required: true,type:'array', message: '请选择售卖周期', trigger: 'change' }
        ],
         startTime: [
          { required: true, message: '请选择首站出发时间', trigger: 'change' }
        ],
         per_buy_num: [
          { required: true, type:'number' ,message: '请输入单次限购人数', trigger: 'blur' }
        ],
        check_time: [
          { required: true,type:'number', message: '请输入提前检票时间', trigger: 'blur' }
        ],
        ahead_refund_time: [
          { required: true,type:'number', message: '请输入可提前退票时间', trigger: 'blur' }
        ],  
        is_passenger: [
          { required: true, type:'number',message: '请选择乘车人登记', trigger: 'blur' }
        ],
        check_ticket_type: [
          { required: true,type:'number', message: '请选择验票方式', trigger: 'blur' }
        ],
        yu_sale_num: [
          { required: true,type:'number', message: '请输入预售天数', trigger: 'blur' }
        ],
        price: [
          { required: true,type:'number', message: '请输入原价', trigger: 'blur' }
        ],
        discount_price: [
          { required: true,type:'number',message: '请输入优惠价格', trigger: 'blur' }
        ]
        
      },
  
      // aa: [],
      // openSubimit: false
      // 线路站点
      map: {},
      routes: [],
      polyline: {},
      city: '贵阳',
      isShow: false,
      duration: '', // 耗时
      distance: '', // 距离
      trafficLights: '', // 红绿灯个数
      stopList: [],
      isStopListAdd: true,
      stopIndex: '',
      markerList: [],
      stopForm: {
        stop_name: '',
        stop_type: '',
        stop_tag: '',
        lng: '', // 纬度
        lat: '', // 精度
        image: [],
        time_consume: '',
        panne: false

      },
     modalPic: false,
     isChoice: "",
     gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      picTit: "",
      tableIndex: 0,
      images: [],
      isStopListAdd: true,
      isToRegular:false,
      //线路站点
      //班次版本
      columns1:[
        {
            title: '售卖周期',
            slot: 'sales_desc'
        },
        {
            title: '状态',
            key: 'status_desc'
        },
        {
            title: '班次',
            slot: 'dp_time_str'
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 130,
        },
      ],
      loading:false,
      showSchedule: false,
      scheduItemForm: {
        // yuTime: '',
        sale_dates_list: [],
        status: 1,
        line_regular_version_id: ''
      },
      showAddRegular:false,
      regularForm: {
        line_id: this.lineId,
        startTime: '',
        regular_status: 1,
        line_regular_version_id: ''
      },
      sale_dates_state: { 0: '周一', 1: '周二', 2: '周三', 3: '周四', 4: '周五', 5: '周六', 6: '周日' },
      regularListData:[],
      showRegularTable: false,
      //班次版本
      odCityList:[],
      //运营信息
      brokerage:0,
        brokerageTwo:0,
        operationForm: {
          id: 0,
        start_city:'',
        end_city:'',
        operation_time: [],
        per_buy_num: 5,
        check_time: 60,
        ahead_refund_time: 86400,
        abort_time: 0,
        sort: 0,
        ishot: 0,
        check_ticket_type: 2,
        is_passenger: 1,
        yu_sale_num: 20,
        price: 1,
        discount_price: 1,
        reveser_line_id: '',
        is_brokerage: 0,
        brokerage:0,
        brokerage_two:0,
        items: [
          {
            name: '',
            price: '',
            notice: ''

          }
        ]
      },
      // 运营信息
    };
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
    labelBottom() {
      return this.isMobile ? undefined : 15;
    },
  },
    watch: {
    Id(val, oldVal) { // 普通的watch监听
      // if (val!=oldVal) this.initLine(val) 
    }
  },
  created() {
  },
  mounted() {
    let beginTime = 0; //开始时间
        let differTime = 0; //时间差
        window.onunload = function () {
          differTime = new Date().getTime() - beginTime;
          if (differTime <= 5) {
                util.cookies.remove('edit_custom_bus_id')
          } else {
            console.log("这是刷新");
          }
        };

        window.onbeforeunload = function () {
          beginTime = new Date().getTime();
        };

    this.getAdminInfo()

    this.initCityList()
  },
  destroyed() {
  },
  methods: {

    changeBrokerage(e){
      e==false?this.operationForm.is_brokerage=0:this.operationForm.is_brokerage=1;
    },
    
    initCityList(){
      businessCityListApi().then((res) => {
           this.odCityList = res.data
        })
        .catch((error) => {
          this.$Message.error(error.msg)
        });
    },

    // 初始化地图
    initMap(){
      var self = this
      const map = new window.AMap.Map('container', {
        center: [106.674463, 26.619523],
        resizeEnable: true,
        zoom: 10
      })
     
      map.plugin('AMap.Geolocation', function() {
        var geolocation = new window.AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          buttonOffset: new window.AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: 'RB'
        })
        //  map.addControl(geolocation)
        geolocation.getCurrentPosition()
        window.AMap.event.addListener(geolocation, 'complete', onComplete) // 返回定位信息
        window.AMap.event.addListener(geolocation, 'error', onError) // 返回定位出错信息
      })
      // 解析定位结果
      function onComplete(data) {
        self.city = data.addressComponent.city
        map.setCenter([data.position.lng, data.position.lat]); //设置地图中心点

      }
      function onError(data) {
        console.log(5555, data)
      }

      // 设置鼠标样式
      map.setDefaultCursor('crosshair')

      self.map = map

       // 输入提示
     AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          city: self.city,
          input: 'pickerInput'
        //   autocompleteOptions:{
        //       outPutDirAuto: false
        //   }
        })

        // 初始化poiPicker
        self.poiPickerReady(poiPicker, map)
      })

      map.on('click', function(e) {
        self.isShow = true
        self.stopForm.lng = e.lnglat.getLng()
        self.stopForm.lat = e.lnglat.getLat()
      })

        this.Id = this.$route.query.id ? this.$route.query.id : util.cookies.get('edit_custom_bus_id')
        if (this.Id) {
          this.initLine(this.Id)  
        }


    },


    // h获取管理员信息
    getAdminInfo(){
      adminInfoApi().then((res) => {
          this.cityList = res.data.admin_roles_info
          if(res.status==200) this.initMap()
        })
        .catch((error) => {
          this.$Message.error(error.msg)
        });
    },

    // 初始化线路
     initLine(id) {
      var that = this
      getCustomBusApi(id).then(res => {
        res = res.data
        that.lineId = res.line_id
        that.isStopListAdd = false
        that.baseInfoForm = {
          id: res.id,
          city_id: res.city_id,
          company_id: res.company_id,
          line_sn: res.line_sn,
          trait: res.trait,
          seat_type: res.seat_type,
          origin: res.origin,
          destination: res.destination,
        }
        that.operationForm = {
          id: res.id,
          start_city: res.start_city,
          end_city:res.end_city,
          per_buy_num: res.per_buy_num?res.per_buy_num:5,
          check_ticket_type: res.check_ticket_type? res.check_ticket_type:1,
          is_passenger: res.is_passenger?res.is_passenger:0,
          yu_sale_num: res.yu_sale_num?res.yu_sale_num:20,
          check_time: res.check_time?res.check_time:0,
          ahead_refund_time: res.ahead_refund_time?res.ahead_refund_time:86400,
          abort_time: res.abort_time?res.abort_time:0,
          sort: res.sort?res.sort:0,
          ishot: res.ishot?res.ishot:0,
          price: res.price?parseFloat(res.price):0.01,
          discount_price: res.discount_price?parseFloat(res.discount_price):0.01,
          is_brokerage:res.is_brokerage,
          brokerage: parseFloat(res.brokerage),
          brokerage_two: parseFloat(res.brokerage_two)
        }
        that.priceList = res.line_price.length>0 ? res.line_price : [];
        if(res.is_brokerage){
          that.brokerage = parseFloat(res.brokerage)
          that.brokerageTwo = parseFloat(res.brokerage_two)
          that.value1 = true
        }

        var city = {}
        that.cityList.forEach(function(item) {
          if (item.city_id === res.city_id) {
            city = item
          }
        })
        that.companyList = city.company_list
        that.stopList = res.stop_list
        if (res.stop_list.length >= 2) {
          // that.initStopPrice()
          that.isStopListAdd = false
          that.fetchRoutes()
          that.addMarkers(that)
          that.isToRegular = true
        }
        // that.initSchedule()
        that.map.setFitView()
      }).catch(error => {
          this.$Message.error(error)
      })
    },

    // 初始化班次版本
     initSchedule() {
      var that = this
      getRegularVersionApi(this.lineId).then(res => {
        res = res.data
        that.regularListData = res
      }).catch(error => {
        console.log(error)
      })
    },
// 选择城市触发
    selectCity(id) {
      if(!id)  this.$Message.error('请重新选择出发城市')
      this.start_city = id
    },
    selectCityStart(id) {
      if(!id)  this.$Message.error('请重新选择到达城市')
      this.end_city = id
    },
    selectCityEnd(id) {
      console.log(id)
    },

    // 选择城市触发
    // selectCity(id) {
    //   var city = {}
    //   this.cityList.forEach(function(item) {
    //     if (item.city_id === id) {
    //       city = item
    //     }
    //   })
    //   var that = this
    //   if (!city.company_ids) {
    //     that.$Message.error('该城市下没有公司,请前往维护管理添加公司！')
    //     return
    //   }
    //   that.companyList = city.company_list
    // },
    //保存线路基础信息
    saveBaseInfo(formName){
         var that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.operationForm.brokerage = that.brokerage
          that.operationForm.brokerage_two = that.brokerageTwo
          saveCustomBusBaseInfoApi(that.operationForm).then(response => {
            that.Id = response.data.id
            that.lineId = response.data.line_id
            that.operationForm.id = response.data.id
            util.cookies.set('edit_custom_bus_id', this.Id);

            that.$Message.success('保存成功!')
          }).catch(error => {
            console.log(5555,error)
             this.$Message.error(error.msg)
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
       //  保存站点
    submitSaveStop(val) {
      const that = this
      const last_stop = this.stopList[(this.stopList.length - 1)]
      if (this.stopList.length < 2) {
        this.$Message.error('至少添加两个站点')
        return false
      }
      if (last_stop.stop_type === '1') {
        this.$Message.error('最后站点不能是上车点')
        return false
      }
      var res = 1
      for (var i = 0; i < this.stopList.length; i++) {
        if (this.stopList[i].time_consume && typeof this.stopList[i].time_consume !== 'number' && isNaN(this.stopList[i].time_consume)) {
          res = 0
          break
        }
      }
      if (res === 0) {
        this.$Message.error('请输入正确的预计耗时！')
        return false
      }
      var res2 = 1
      for (var a = 0; a < (this.stopList.length - 1); a++) {
        if (!this.stopList[a].time_consume || this.stopList[a].time_consume === '') {
          res2 = 0
          break
        }
      }
      if (res2 === 0) {
        this.$Message.error('请先完善各站点间的预计耗时！')
        return false
      }
      // TODO
      const data = {
        type: val,
        id: this.Id,
        line_id: this.lineId,
        distance: this.distance,
        traffic_lights: this.trafficLights,
        duration: this.duration,
        stop_list: this.stopList,
        routes: this.routes
      }
      saveLineStopApi(data).then(res => {
        that.isToRegular = true

        // that.initLine( this.Id)
   
         that.initStopPrice()
        
          that.$Message.success('保存成功！')
        that.$Modal.confirm({
            title: '提示',
            okText: '立即设置',
            content: '<p>线路价格已更新，请重新设置, 是否继续?</p>',
            onOk: () => {
              that.currentTab = that.currentTab + 1;
              
            },
            onCancel: () => {
              that.$message.error('已取消设置！')
            }
        });
        // that.$Message.success('保存成功！')
      }).catch(error => {
        console.log(111122,error)
          this.$Message.error(error.msg)
      })
    },

    submitPriceList(){
      if(this.priceList.length){
        var data = {
          line_id: this.lineId,
          price_list: this.priceList
        }
        console.log(4444,this.priceList)
        saveLinePrice(data).then(res => {
            this.$Message.success('保存成功')
          }).catch(error => {
            this.$Message.error(error.msg)
          })
      } else {
         this.$Message.error('请添加线路站点')
      }
      
        
    },
    
    initStopPrice(){
     
     this.initLine(this.Id)
     setTimeout(() => {
      this.priceList = []
      var onList = []
      var offList = []
      this.stopList.forEach(item => {
        if(item.stop_type == 1){
          onList.push(item)
        }
        if(item.stop_type == 2){
          offList.push(item)
        }
        
      })
      
      if(onList.length&&offList.length){
        onList.forEach(on => {
          offList.forEach(off => {
            this.priceList.push({
              line_id: this.lineId?this.lineId: on.line_id,
              on_stop_id: on.line_stop_id,
              off_stop_id: off.line_stop_id,
              on_stop_name: on.stop_name,
              off_stop_name: off.stop_name,
              price: this.operationForm.discount_price
            })
          })
        }) 
        this.submitPriceList()
      } 

     }, 1500);
    

   
  },
     // 增加周期版本
    submitScheduleItemForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this
          this.showSchedule = false
          const formData = {
            line_id: this.lineId,
            sale_dates_list: this.scheduItemForm.sale_dates_list,
            status: this.scheduItemForm.status,
            line_regular_version_id: this.scheduItemForm.line_regular_version_id
          }

          saveRegularVersion(formData).then(res => {
            that.initSchedule()
            that.$refs[formName].resetFields()
            that.$Message.success('保存成功')
          }).catch(error => {
            this.$Message.error(error.msg)
            that.$refs[formName].resetFields()
          })

          console.log(' submit!!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 增加版本的班次 
    submitRegularForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this
          this.showAddRegular = false
          this.showRegularTable = false
          const formData = {
            line_id: this.lineId,
            regular_id: this.regularForm.regular_id,
            start_time: this.regularForm.startTime,
            regular_status: this.regularForm.regular_status,
            line_regular_version_id: this.regularForm.line_regular_version_id
          }

          saveRegularApi(formData).then(res => {
            that.initSchedule()
            that.$refs[formName].resetFields()
            that.$Message.success('保存成功')

          }).catch(error => {
            that.$refs[formName].resetFields()
            this.$Message.error(error.msg)
          })
          console.log(' submit!!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编程运营信息
    submitOperationForm(formName) {
      var that = this
      that.$refs[formName].validate((valid) => {
        if (valid) {
          that.operationForm.id = that.Id
           saveBaseOperationApi(that.operationForm).then(res => {
            that.$Message.success('保存成功!')
          }).catch(error => {
            this.$Message.error(error.msg)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取线路route
    fetchRoutes() {
      // 提交站点
      if(this.stopList.length<=1) return
      getStopRoutes({ stops: this.stopList }).then(response => {
        const data = response.data
        const stops = data.routes

        this.routes = []
        this.trafficLights = data.traffic_lights
        this.distance = data.distance
        this.duration = data.duration
        stops.forEach(element => {
          this.routes.push(new window.AMap.LngLat(element.lng, element.lat))
        })
        this.drawLine(this.routes)
      }).catch(error => {
         this.$Message.error(error.msg)
      })
    },
     // 
     drawLine(path) {
      this.map.remove(this.polyline)
      // 创建折线实例
      this.polyline = new window.AMap.Polyline({
        path: path,
        borderWeight: 3, // 线条宽度，默认为 1
        strokeColor: '#4060ff', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
      })
      // 将折线添加至地图实例
      this.map.add(this.polyline)
    },


    submitStopForm(formName) {
      this.$refs[formName].validate((valid) => {
        const that = this

        if (valid) {
          if (that.stopList.length === 0 && this.stopForm.stop_type === 2) {
            that.$Message.error('第一个站点不能是下车点')
            return false
          }
          that.isShow = false
          // 如果是编辑
          if (!isNaN(that.stopIndex) && that.stopIndex !== '') {
            that.stopList[that.stopIndex] = {
              stop_name: that.stopForm.stop_name,
              stop_type: that.stopForm.stop_type,
              stop_tag: that.stopForm.stop_tag,
              lng: that.stopForm.lng, // 纬度
              lat: that.stopForm.lat, // 精度
              image: that.stopForm.image,
              time_consume: that.stopForm.time_consume,
              panne: false
            }
          } else { // 新增
            that.stopList.push({
              stop_name: that.stopForm.stop_name,
              stop_type: that.stopForm.stop_type,
              stop_tag: that.stopForm.stop_tag,
              lng: that.stopForm.lng, // 纬度
              lat: that.stopForm.lat, // 精度
              image: that.stopForm.image,
              time_consume: that.stopForm.time_consume,
              panne: false
            })
          }

                           

          that.stopList.forEach(element => {
            element.panne === true ? element.panne = false : element.panne = false
          })
          var zoom = Math.floor(Math.random() * 7) + 11 // zoom范围[11,18]
          that.map.setZoom(zoom) // 设置地图层级
          that.map.setCenter([that.stopForm.lng, that.stopForm.lat])
          that.fetchRoutes()
          that.addMarkers(that)
          that.$refs[formName].resetFields()
         
        that.stopIndex = ''

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },



    addRegular(item) {
      this.showAddRegular = true
       this.regularForm.line_id = this.lineId
      this.regularForm.line_regular_version_id = item.id
    },
  
    addRegularItem(item) {
      this.showAddRegular = true
      this.regularForm.line_regular_version_id = item.line_regular_version_id
      this.regularForm.regular_id = item.id
    },

    // 编辑班次
    editRegular(item, opr) {
      if (opr === 'delete') {
        this.$Modal.confirm({
            title: '提示',
            content: '<p>您确定要更改班次版本的状态吗?</p>',
            onOk: () => {
              var that = this
              const formData = {
                line_id: this.lineId,
                line_regular_version_id: item.id,
                status: !item.status,
                sale_dates_list: item.sale_dates_list
              }

              saveRegularVersion(formData).then(res => {
                that.initSchedule()
                this.$message({
                type: 'success',
                message: '更改成功!'
              })
              }).catch(error => {
                this.$Message.error(error.msg)
              })
              
            },
            onCancel: () => {
            }
        });

      } else {
        this.showSchedule = true
        this.scheduItemForm.line_regular_version_id = item.id
        this.scheduItemForm.status = item.status
        this.scheduItemForm.sale_dates_list = item.sale_dates_list
      }
    },
      // 显示panne
    showPanne(index) {
      this.stopList.forEach(element => {
        if (element.panne === true) element.panne = false
      })
      this.stopList[index].panne = true
    },
    addConsumeTime(a, b) {
      console.log(a, b)
      console.log(this.stopList)
    },
    // 编辑站点
    editStop(item, index) {
      console.log(item)
      this.stopForm = {
        stop_name: item.stop_name,
        stop_type: item.stop_type,
        stop_tag: item.stop_tag,
        lng: item.lng, // 纬度
        lat: item.lat, // 精度
        image: item.image,
        time_consume: item.time_consume,
        panne: item.panne

      }
      console.log(index)
      this.stopIndex = index
      this.isShow = true
    },
    // 交换站点
    swapItems: function(arr, index1, index2, direction) {
      this.fetchRoutes()
      this.addMarkers(this)
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // 站点上移
    stopUp: function(index) { // 上移
      var _vm = this
      if (index === 0) {
        return
      }
      _vm.swapItems(_vm.stopList, index, index - 1)
      _vm.fetchRoutes()
      _vm.addMarkers(_vm)
    },
    // 站点下移
    stopDown: function(index) { // 下移
      var _vm = this
      if (index === _vm.stopList.length - 1) {
        return
      }
      _vm.swapItems(_vm.stopList, index, index + 1)
      _vm.fetchRoutes()
      _vm.addMarkers(_vm)
    },
    // 删除站点
    deleteStop(item, index) {
      var that = this
      that.map.remove(that.markerList[index])
      that.stopList.splice(index, 1)
      that.markerList.splice(index, 1)
      that.fetchRoutes()
      that.addMarkers(that)
      that.$Message.success('删除成功')
    },
    // 添加地图marker
     addMarkers(that) {

      that.map.remove(that.markerList)
      that.markerList = []
      that.stopList.forEach(function(element, key, array) {
        var marker = new window.AMap.Marker({
          position: new window.AMap.LngLat(element.lng, element.lat),
          offset: new window.AMap.Pixel(-10, -10),
          icon: that.getIconObj(element.stop_type, key, array),
          title: element.stop_name,
          animation: 'AMAP_ANIMATION_DROP',
          clickable: true,
          draggable: true,
          extData: key,
          label: that.getLabelObj(element.stop_name),
          position: [element.lng, element.lat]

        })
        that.markerList.push(marker)
      })
     
      that.map.add(that.markerList)
      for (var i = 0; i < that.markerList.length; i++) {
        that.markerList[i].on('click', function(e) {
          var data = JSON.parse(JSON.stringify(e.target.getExtData()))
          var zoom = Math.floor(Math.random() * 7) + 11 // zoom范围[11,18]
          that.map.setZoom(zoom) // 设置地图层级
          that.map.setCenter([data.lng, data.lat])

          // 得到的数据
        })
      }
       // 绑定地图事件
          for (var i = 0; i < that.markerList.length; i++) {
          that.markerList[i].on('dragend', function(e) {
            var key = JSON.parse(JSON.stringify(e.target.getExtData()))
            that.stopList[key]['lng'] = e.lnglat.lng
            that.stopList[key]['lat'] = e.lnglat.lat
            that.fetchRoutes()


            // 得到的数据
          })
        }
    },
  
   // 创建 地图marker 实例：
    getIconObj(stop_type, key, array) {
      // 创建 AMap.Icon 实例：
      var icon = ''
      var size = new window.AMap.Size(40, 50)
      var imageSize = new window.AMap.Size(18, 32)
      if (key === 0) {
        icon = require('../../../assets/common/start_mark.png')
        size = new window.AMap.Size(32, 50)
        imageSize = new window.AMap.Size(24, 36)
      } else if (key == (array.length - 1)) {
        icon = require('../../../assets/common/end_mark.png')
        size = new window.AMap.Size(32, 50)
        imageSize = new window.AMap.Size(24, 36)
      } else if (stop_type == '1') {
        icon = require('../../../assets/common/up_mark.png')
      } else if (stop_type == '2') {
        icon = require('../../../assets/common/down_mark.png')
      } else {
        icon = require('../../../assets/common/up_down_mark.png')
      }

      return new window.AMap.Icon({
        size: size, // 图标尺寸
        image: icon, // Icon的图像
        imageOffset: new window.AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: imageSize // 根据所设置的大小拉伸或压缩图片
      })
    },
   // 创建 地图marker 实例：  
     getLabelObj(name) {
      return {
        offset: new window.AMap.Pixel(20, 20), // 设置文本标注偏移量
        content: "<p class='markerName' style='text-align: center;'>" + name + "</p><span class='triangle_border_down'></span>", // 设置文本标注内容

        direction: 'top' // 设置文本标注方位
      }
    },

  // 点击图
    modalPicTap(tit, picTit, index) {
      this.modalPic = true;
      this.isChoice = tit === "dan" ? "单选" : "多选";
      this.picTit = picTit;
      this.tableIndex = index;
    },
   // 获取单张图片信息
    getPic(pc) {

      this.stopForm.image.push(pc.att_dir);
      this.modalPic = false;
    },
    // 获取多张图信息
    getPicD(pc) {
      this.images = pc;
      this.images.map((item) => {
        this.stopForm.image.push(item.att_dir);
        this.stopForm.image =this.stopForm.image.splice(
          0,
          10
        );
      });
      this.modalPic = false;
    },
     handleRemove(i) {
      this.images.splice(i, 1);
      this.stopForm.image.splice(i, 1);
    },
    // 关闭图片上传模态框
    changeCancel(msg) {
      this.modalPic = false;
    },
 // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.stopForm.image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.stopForm.image = newItems;
    },
  
    closeStopForm(){
      this.$refs['stopForm'].resetFields();
      this.stopForm.image = []
    },
    // 上一页；
    upTab() {
      this.currentTab = this.currentTab - 1;
    },
    // 下一页；
    downTab() {
      this.currentTab = this.currentTab + 1;

      // if(this.stopList.length>=2)
      // {
      //   this.initStopPrice()
      // }
    },
  
    next() {
        var res1 = true
      this.regularListData.forEach(item => {
        if (item.dp_time_str === '') {
          res1 = false
          this.$Message.error('请完善班次版本信息' + item.sales_desc)
        }
      })
      if (res1 == true) {
          this.currentTab = this.currentTab + 1;
      }
    },

  
    // tab切换
    onhangeTab(name) {
      console.log(name)
      if(name==2&&!this.Id){
         this.$Message.error('请先保存线路基础信息！')
          this.currentTab = 1
        //  return false
      } else{
                 this.currentTab = name;
      }
    },

   addRegularVersion() {
      this.showSchedule = true
      this.scheduItemForm = {
        sale_dates_list: [],
        line_regular_version_id: '',
        status: 1
      }
    },
      closescheduItem(formName) {
      this.$refs[formName].resetFields()

      this.showSchedule = false
    },
  closeRegular(formName) {
      this.$refs[formName].resetFields()

      this.showAddRegular = false
    },
    handleChange(time){
      this.regularForm.startTime =time
    },
  //初始化 
   poiPickerReady(poiPicker, map) {
      window.poiPicker = poiPicker

      var marker = new window.AMap.Marker()

      var infoWindow = new window.AMap.InfoWindow({
        // offset: new window.AMap.Pixel(-300, 300)
      })

      // 选取了某个POI
      poiPicker.on('poiPicked', function(poiResult) {
        var source = poiResult.source
        var poi = poiResult.item
        var info = {
          source: source,
          id: poi.id,
          name: poi.name,
          location: poi.location.toString(),
          address: poi.address
        }
        //  window.AMap.setPointToCenter()
        marker.setMap(map)
        infoWindow.setMap(map)

        marker.setPosition(poi.location)
        infoWindow.setPosition(poi.location)

        // // infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>')
        infoWindow.open(map, marker.getPosition())

        map.setCenter(marker.getPosition())
        map.setZoom(17)
      })
    },
  
  },
};
</script>
<style scoped lang="stylus">
.info {
    z-index: 1;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    position: absolute;
    top: 1rem;
    background-color: #fff;
    width: auto;
    min-width: 22rem;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(114,124,245,.5);
}
.input-text {
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    margin-right: .5rem;
}

#pickerInput {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    /* width: 100%; */
    height: 32px;
    padding: 4px 11px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 32px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all .3s;
}
.pictrueBox {
  display: inline-block;
}

.pictrueTab {
  width: 40px !important;
  height: 40px !important;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

 .station-index >>> .station-form .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .station-index >>> .station-form .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .station-index >>> .station-form .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 104px;
    height: 104px;
    line-height: 104px;
    text-align: center;
  }
  .station-index >>> .station-form .avatar {
    width: 104px;
    height: 104px;
    display: block;
  }
  .station-index >>> .station-form .el-form-item__label {
    color: rgba(0, 0, 0, 0.658);
    font-weight: 500;
  }
  .ant-input-affix-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: start;
}
.ant-input-sm {
    height: 24px;
    padding: 1px 7px;
    line-height: 24px;
}
.ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
}
.ant-input-affix-wrapper .ant-input {
    min-height: 100%;
}
.ant-input-affix-wrapper .ant-input:not(:last-child) {
    padding-right: 30px;
}
.ant-input-affix-wrapper .ant-input-suffix {
    right: 12px;
}
.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: rgba(0,0,0,.65);
    line-height: 0;
    transform: translateY(-50%);
}
.ant-input {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    line-height: 32px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all .3s;
}
.station-index >>> .markerName {
    background: #fff;
    border-radius: 6px;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 1px 2px 12px rgba(0,0,0,.215);
    font-size: 12px;
}
.station-index >>> .triangle_border_down {
    position: absolute;
    left: 50%;
    transform: translate(-14px,-7px);
    width: 0;
    height: 0;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 14px 14px 0;
    display: inline-block;
}
.station-index >>> .amap-marker-label {
      top: -50px !important;
    left: -25px !important;
    border: none;
    background:none;
}
.station-control-panne{
      width: 180px;
    text-align: center;
    margin-left: -70px;
}
.station-control-panne>a {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px 10px 10px 0;
    background-size: 100%;
}
.moveLeft {
    background-image: url('../../../assets/common/moveLeft.png');
}
.addStationLeft {
    background-image: url('../../../assets/common/addStationLeft.png');
}
.delete {
    background-image: url('../../../assets/common/delete.png');
}
.edit {
    background-image: url('../../../assets/common/edit.png');
}
.addStationRight {
    background-image: url('../../../assets/common/addStationRight.png');
}
.moveRight {
    background-image: url('../../../assets/common/moveRight.png');
}


</style>
